<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button
        class="filter-item"
        size="small"
        type="primary"
        v-waves
        icon="el-icon-plus"
        @click="handleUpdate(null)"
      >添加批量修改</el-button>

      <el-button
        class="filter-item"
        size="small"
        type="primary"
        v-waves
        icon="el-icon-search"
        @click="loadData"
      >刷新</el-button>
    </div>
    <el-table
      :data="list"
      :height="tableHeight"
      @sort-change="sortChange"
      v-loading="listLoading"
      element-loading-text="给我一点时间"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column prop="props" align="center" label="修改的标签" width="320"></el-table-column>
      <el-table-column prop="sort" align="center" label="是否显示" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.showFlag==1?'显示':'不显示'}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="creator" align="center" label="创建人" width="160"></el-table-column>
      <el-table-column prop="createTime" align="center" label="创建时间" width="160">
        <template slot-scope="scope">{{scope.row.createTime | parseTime}}</template>
      </el-table-column>

      <!-- <el-table-column align="center" label="操作" width="200" class-name="small-padding">
        <template slot-scope="scope">
          <el-button
            size="mini"
            v-if="~accessable.indexOf('manage:ad_delete')"
            type="danger"
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>-->
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="params.page"
        :page-sizes="[10,20,30,50]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <el-dialog :title="isEditing?'修改':'添加'" :visible.sync="dialogFormVisible">
      <el-form
        class="dialog-form"
        :rules="rules"
        ref="dataForm"
        :model="temp"
        label-position="left"
        label-width="120px"
      >
        <el-form-item label="标签名称" prop="props">
          <el-checkbox-group v-model="temp.props">
            <el-checkbox v-for="(tag,idx) in tags" :value="tag" :key="idx" :label="tag"/>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="是否显示" prop="showFlag">
          <el-radio :label="0" v-model="temp.showFlag">不显示</el-radio>
          <el-radio :label="1" v-model="temp.showFlag">显示</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" :loading="submiting" @click="submitFormAction">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style scoped>
.avatar-uploader {
  width: 375px;
  height: 155px;
}

.avatar-uploader >>> .avatar {
  width: 375px;
  height: 155px;
}

.avatar-uploader >>> .avatar-uploader-icon {
  width: 375px;
  height: 155px;
}
.img-src {
  width: 100px;
}
</style>

<script>
export default {
  data () {
    return {
      tableHeight: 400,
      total: 0,
      tags: [],
      temp: {
        id: '',
        props: [],
        showFlag: ''
      },
      params: {
        page: 1,
        pageSize: 10
      },
      rules: {
        props: [
          {
            required: true,
            message: '请选择需要修改的标签',
            trigger: 'change',
            type: 'array'
          }
        ],

        showFlag: [
          {
            required: true,
            message: '请选择是否显示',
            trigger: 'change'
          }
        ]
      }
    }
  },
  created () {
    this.tableHeight = window.innerHeight - 300
    this.loadData()
    this.loadTags()
  },
  methods: {
    submitFormAction () {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.submiting = true
          this.$post(
            '/admin/gas_station/batch-change-gas-props',
            this.temp
          ).then(data => {
            this.submiting = false
            this.loadData()
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '操作成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    handleCurrentChange (page) {
      this.params.page = page
      this.loadData()
    },
    handleSizeChange (size) {
      this.params.pageSize = size
      this.loadData()
    },
    loadTags () {
      this.$get('/admin/gas_station/all-props').then(data => {
        this.tags = data
      })
    },
    loadData () {
      this.listLoading = true
      this.$get('/admin/gas_station/changed-gas-props-log', this.params)
        .then(data => {
          this.list = data.list
          this.total = data.total
          this.listLoading = false
        })
        .catch(_ => {
          this.listLoading = false
        })
    }
  }
}
</script>
